<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>程序员工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">程序员工具箱</div>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="leftMenu" func="websockettest" href="javascript:;">websocket在线测试</a>
                </li>
                <li class="layui-nav-item">
                    <a class="leftMenu" func="timestamp" href="javascript:;">时间戳工具</a>
                </li>
                <li class="layui-nav-item">
                    <a class="leftMenu" func="jsonFormat" href="javascript:;">json格式化</a>
                </li>
                <li class="layui-nav-item">
                    <a class="leftMenu" func="encrypt" href="javascript:;">加解密</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <iframe frameborder="0" scrolling="yes" style="width: 100%" src="" id="rightContent">
        </iframe>
    </div>

</div>

<script src="static/jquery/jquery.min.js"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script src="static/pagejs/index.js" charset="utf-8"></script>

<script>
    layui.use('element', function(){
        var element = layui.element;
    });
    layui.use([], function () {
        $('.leftMenu').on('click', function () {
            var othis = $(this);
            var func = othis.attr('func');
            if (func == 'websockettest') {
                $("#rightContent").attr("src", "websocketTest.html");
            }else if(func == 'timestamp') {
                $("#rightContent").attr("src", "timestamp.html");
            }else if(func == 'jsonFormat') {
                $("#rightContent").attr("src", "formatjson.html");
            }else if(func == 'encrypt') {
                $("#rightContent").attr("src", "encrypt.html");
            }
            var frame = $("#rightContent");
            var frameheight = $(window).height();
            frame.css("height", frameheight);
        });
    });

</script>
</body>
</html>